<template>
  <div class="card">
    <div class="card-header">
      <h2 class="section-title">📦 搜索结果</h2>

      <div class="config-summary">
        <el-button type="primary" @click="alljoin"> 全部加入数据篮 </el-button>
        <el-button type="success" @click="openConfig"> 配置查询条件 </el-button>
        <div class="summary-details">
          <p>按销量: {{ config.sortBySales ? "是" : "否" }}</p>
          <p>页码: {{ config.limit }} 页</p>
        </div>
      </div>

      <!-- 配置弹窗 -->
      <ConfigFormDialog
        ref="configFormDialogRef"
        :init-form-data="config"
        @submit="onConfigSubmit"
      />
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        empty-text="暂无商品数据"
      >
        <el-table-column
          prop="num_iid"
          label="商品ID"
          width="120"
          align="center"
        />
        <el-table-column label="商品图片" width="100">
          <template #default="{ row }">
            <img
              class="product-image"
              style="width: 80px; height: 80px"
              :src="row.pic_url"
              alt="商品图片"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="商品标题" width="250">
          <template #default="{ row }">
            <div class="product-info">
              <div class="text">
                <div class="product-title">{{ row.title }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="detail_url" label="商品链接" width="250">
          <template #default="{ row }">
            <a :href="row.detail_url" target="_blank">{{ row.detail_url }}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="orginal_price"
          label="券前价"
          width="120"
          align="center"
        />
        <el-table-column
          prop="promotion_price"
          label="券后价"
          width="120"
          align="center"
        />
        <el-table-column prop="sales" label="销量" width="100" align="center">
          <template #default="{ row }">
            <span>{{ row.sales || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" align="center">
          <template #default="{ row }">
            <el-button
              size="small"
              :type="isInBasket(row.num_iid) ? 'success' : 'primary'"
              @click="() => $emit('toggle-basket', row)"
              plain
            >
              {{ isInBasket(row.num_iid) ? "已加入数据篮" : "加入数据篮" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import ConfigFormDialog from "@/components/ConfigFormDialog.vue";
import { ElMessage } from "element-plus";

defineProps({
  tableData: Array,
  total: Number,
  isInBasket: Function,
});

const emit = defineEmits(["toggle-basket", "all-toggle-basker", "form-change"]);

// 当前配置（会回显到弹窗）
const config = ref({
  sortBySales: true,
  limit: 1,
});

const configFormDialogRef = ref(null);

// 打开弹窗
const openConfig = () => {
  configFormDialogRef.value.show();
};

// 提交配置
const onConfigSubmit = (data) => {
  console.log("提交的配置:", data);
  // 更新主配置
  config.value = { ...data };
  emit("form-change", data);
  ElMessage.success("配置已更新");
};

// 全部加入数据篮
const alljoin = () => {
  emit("all-toggle-basker");
};
</script>
